import './AntVCharts.scss'
import { Column, Bar, Line, Area, Pie, Gauge, Radar } from '@ant-design/plots'
import { useDebounce } from 'ahooks'
import { useEffect, useRef, useState } from 'react'


import * as echarts from 'echarts'
import 'echarts-gl'


// 自定义tooptip
const TooltipTemplateA01 = ({ list, data }) => {
    const { items, title } = list
    const arr = data.filter(v => v.type === title)
    return (
        <div className='TooltipTemplateA01'>
            <div>{title}</div>
            <div>
                {items.map(({ name, color, value }, index) => {
                    return (
                        <div className='standardTooltip' key={index}>
                            <div style={{ background: color }} />
                            <div>{name} : </div>
                            <div>{value}</div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
const TooltipTemplateA02 = ({ list, data }) => {
    const [item] = list.items
    const obj = data.filter(v => v.value === item.value)
    if (obj.length !== 0) {
        const [{ type, value }] = obj
        return (
            <div className='TooltipTemplateA02'>
                <div>{type}</div>
                <div>  <span style={{ background: item.color }} /> {value}</div>
            </div>
        )
    }
}
const TooltipMapping = {
    TooltipTemplateA01,
    TooltipTemplateA02
}

// !!!柱状图
export const ColumnTemplate = ({ size, data, style }) => {
    const [Size, setSize] = useState(size)
    const SizeValue = useDebounce(Size, { wait: 500 })
    const { width, height } = SizeValue
    useEffect(() => setSize(size), [size])
    const { group, stack, chartColor, legendStatus, tooltipStatus, scrollbarStatus, labelStatus } = style
    const config = {
        xField: 'type',
        yField: 'value',
        colorField: 'name',
        width,
        height,
        data,
        group,
        stack,
        // 色板
        scale: { color: { range: chartColor } },
        style: { radius: 8 },
        // 坐标轴
        axis: {
            x: {
                // 标题
                title: style.Xtitle,
                titlePosition: style.XtitlePosition,
                titleFontSize: style.XtitleFontSize,
                titleFontFamily: style.XtitleFontFamily,
                titleFontWeight: style.XtitleFontWeight,
                // 轴线
                line: style.Xline,
                lineLineWidth: style.XlineLineWidth,
                lineLineDash: [style.XlineLineDashA, style.XlineLineDashB],
                lineStroke: style.XlineStroke,
                lineStrokeOpacity: style.XlineStrokeOpacity,
                // 刻度
                tick: style.Xtick,
                tickDirection: style.XtickDirection,
                tickLength: style.XtickLength,
                tickLineWidth: style.XtickLineWidth,
                tickStroke: style.XtickStroke,
                tickLineDash: [style.XtickLineDashA, style.XtickLineDashB],
                tickStrokeOpacity: style.XtickStrokeOpacity,
                // 刻度值
                label: style.Xlabel,
                labelAlign: style.XlabelAlign,
                labelDirection: style.XlabelDirection,
                labelSpacing: style.XlabelSpacing,
                labelFontSize: style.XlabelFontSize,
                labelFontFamily: style.XlabelFontFamily,
                labelFontWeight: style.XlabelFontWeight,
                labelFill: style.XlabelFill,
                labelFillOpacity: style.XlabelFillOpacity,
                // 网格线
                grid: style.Xgrid,
                gridAreaFill: style.XgridAreaFill,
                gridLineWidth: style.XgridLineWidth,
                gridLineDash: [style.XgridLineDashA, style.XgridLineDashB],
                gridStroke: style.XgridStroke,
                gridStrokeOpacity: style.XgridStrokeOpacity
            },
            y: {
                // 标题
                title: style.Ytitle,
                titlePosition: style.YtitlePosition,
                titleFontSize: style.YtitleFontSize,
                titleFontFamily: style.YtitleFontFamily,
                titleFontWeight: style.YtitleFontWeight,
                // 轴线
                line: style.Yline,
                lineLineWidth: style.YlineLineWidth,
                lineLineDash: [style.YlineLineDashA, style.YlineLineDashB],
                lineStroke: style.YlineStroke,
                lineStrokeOpacity: style.YlineStrokeOpacity,
                // 刻度
                tick: style.Ytick,
                tickDirection: style.YtickDirection,
                tickLength: style.YtickLength,
                tickLineWidth: style.YtickLineWidth,
                tickStroke: style.YtickStroke,
                tickLineDash: [style.YtickLineDashA, style.YtickLineDashB],
                tickStrokeOpacity: style.YtickStrokeOpacity,
                // 刻度值
                label: style.Ylabel,
                labelAlign: style.YlabelAlign,
                labelDirection: style.YlabelDirection,
                labelSpacing: style.YlabelSpacing,
                labelFontSize: style.YlabelFontSize,
                labelFontFamily: style.YlabelFontFamily,
                labelFontWeight: style.YlabelFontWeight,
                labelFill: style.YlabelFill,
                labelFillOpacity: style.YlabelFillOpacity,
                // 网格线
                grid: style.Ygrid,
                gridAreaFill: style.YgridAreaFill,
                gridLineWidth: style.YgridLineWidth,
                gridLineDash: [style.YgridLineDashA, style.YgridLineDashB],
                gridStroke: style.YgridStroke,
                gridStrokeOpacity: style.YgridStrokeOpacity
            }
        },
        // 图例 false 不显示
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,
        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        // 滚动条
        scrollbar: scrollbarStatus ? {
            x: {
                ratio: style.scrollRatio,
                value: style.scrollValue,
                style: {
                    thumbFillOpacity: 1,
                    thumbStrokeOpacity: 1,
                    trackFillOpacity: 1,
                    trackStrokeOpacity: 1,
                    isRound: style.scrollIsRound,
                    padding: style.scrollPadding,
                    thumbFill: style.scrollThumbFill,
                    thumbStroke: style.scrollThumbStroke,
                    trackSize: style.scrollTrackSize,
                    trackFill: style.scrollTrackFill,
                    trackStroke: style.scrollTrackStroke,
                }
            }
        } : false,
    }
    return <Column className='ChartsClass' {...config} />
}
// !!!条形图
export const BarTemplate = ({ size, data, style }) => {
    const [Size, setSize] = useState(size)
    const SizeValue = useDebounce(Size, { wait: 500 })
    const { width, height } = SizeValue
    useEffect(() => setSize(size), [size])
    const { group, stack, chartColor, legendStatus, tooltipStatus, scrollbarStatus, labelStatus } = style
    const config = {
        xField: 'type',
        yField: 'value',
        colorField: 'name',
        width,
        height,
        data,
        group,
        stack,
        // 色板
        scale: { color: { range: chartColor } },
        style: { radius: 8 },
        // 坐标轴
        axis: {
            x: {
                // 标题
                title: style.Xtitle,
                titlePosition: style.XtitlePosition,
                titleFontSize: style.XtitleFontSize,
                titleFontFamily: style.XtitleFontFamily,
                titleFontWeight: style.XtitleFontWeight,
                // 轴线
                line: style.Xline,
                lineLineWidth: style.XlineLineWidth,
                lineLineDash: [style.XlineLineDashA, style.XlineLineDashB],
                lineStroke: style.XlineStroke,
                lineStrokeOpacity: style.XlineStrokeOpacity,
                // 刻度
                tick: style.Xtick,
                tickDirection: style.XtickDirection,
                tickLength: style.XtickLength,
                tickLineWidth: style.XtickLineWidth,
                tickStroke: style.XtickStroke,
                tickLineDash: [style.XtickLineDashA, style.XtickLineDashB],
                tickStrokeOpacity: style.XtickStrokeOpacity,
                // 刻度值
                label: style.Xlabel,
                labelAlign: style.XlabelAlign,
                labelDirection: style.XlabelDirection,
                labelSpacing: style.XlabelSpacing,
                labelFontSize: style.XlabelFontSize,
                labelFontFamily: style.XlabelFontFamily,
                labelFontWeight: style.XlabelFontWeight,
                labelFill: style.XlabelFill,
                labelFillOpacity: style.XlabelFillOpacity,
                // 网格线
                grid: style.Xgrid,
                gridAreaFill: style.XgridAreaFill,
                gridLineWidth: style.XgridLineWidth,
                gridLineDash: [style.XgridLineDashA, style.XgridLineDashB],
                gridStroke: style.XgridStroke,
                gridStrokeOpacity: style.XgridStrokeOpacity
            },
            y: {
                // 标题
                title: style.Ytitle,
                titlePosition: style.YtitlePosition,
                titleFontSize: style.YtitleFontSize,
                titleFontFamily: style.YtitleFontFamily,
                titleFontWeight: style.YtitleFontWeight,
                // 轴线
                line: style.Yline,
                lineLineWidth: style.YlineLineWidth,
                lineLineDash: [style.YlineLineDashA, style.YlineLineDashB],
                lineStroke: style.YlineStroke,
                lineStrokeOpacity: style.YlineStrokeOpacity,
                // 刻度
                tick: style.Ytick,
                tickDirection: style.YtickDirection,
                tickLength: style.YtickLength,
                tickLineWidth: style.YtickLineWidth,
                tickStroke: style.YtickStroke,
                tickLineDash: [style.YtickLineDashA, style.YtickLineDashB],
                tickStrokeOpacity: style.YtickStrokeOpacity,
                // 刻度值
                label: style.Ylabel,
                labelAlign: style.YlabelAlign,
                labelDirection: style.YlabelDirection,
                labelSpacing: style.YlabelSpacing,
                labelFontSize: style.YlabelFontSize,
                labelFontFamily: style.YlabelFontFamily,
                labelFontWeight: style.YlabelFontWeight,
                labelFill: style.YlabelFill,
                labelFillOpacity: style.YlabelFillOpacity,
                // 网格线
                grid: style.Ygrid,
                gridAreaFill: style.YgridAreaFill,
                gridLineWidth: style.YgridLineWidth,
                gridLineDash: [style.YgridLineDashA, style.YgridLineDashB],
                gridStroke: style.YgridStroke,
                gridStrokeOpacity: style.YgridStrokeOpacity
            }
        },
        // 图例 false 不显示
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,
        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        // 滚动条
        scrollbar: scrollbarStatus ? {
            x: {
                ratio: style.scrollRatio,
                value: style.scrollValue,
                style: {
                    thumbFillOpacity: 1,
                    thumbStrokeOpacity: 1,
                    trackFillOpacity: 1,
                    trackStrokeOpacity: 1,
                    isRound: style.scrollIsRound,
                    padding: style.scrollPadding,
                    thumbFill: style.scrollThumbFill,
                    thumbStroke: style.scrollThumbStroke,
                    trackSize: style.scrollTrackSize,
                    trackFill: style.scrollTrackFill,
                    trackStroke: style.scrollTrackStroke,
                }
            }
        } : false,
    }
    return <Bar className='ChartsClass' {...config} />
}
// !!!折线图
export const LineTemplate = ({ size, data, style }) => {
    const [Size, setSize] = useState(size)
    const SizeValue = useDebounce(Size, { wait: 500 })
    const { width, height } = SizeValue
    useEffect(() => setSize(size), [size])
    const { shapeField, chartColor, legendStatus, tooltipStatus, scrollbarStatus, labelStatus } = style
    const config = {
        xField: 'type',
        yField: 'value',
        colorField: 'name',
        shapeField,
        width,
        height,
        data,
        // 色板
        scale: { color: { range: chartColor } },
        // 坐标轴
        axis: {
            x: {
                // 标题
                title: style.Xtitle,
                titlePosition: style.XtitlePosition,
                titleFontSize: style.XtitleFontSize,
                titleFontFamily: style.XtitleFontFamily,
                titleFontWeight: style.XtitleFontWeight,
                // 轴线
                line: style.Xline,
                lineLineWidth: style.XlineLineWidth,
                lineLineDash: [style.XlineLineDashA, style.XlineLineDashB],
                lineStroke: style.XlineStroke,
                lineStrokeOpacity: style.XlineStrokeOpacity,
                // 刻度
                tick: style.Xtick,
                tickDirection: style.XtickDirection,
                tickLength: style.XtickLength,
                tickLineWidth: style.XtickLineWidth,
                tickStroke: style.XtickStroke,
                tickLineDash: [style.XtickLineDashA, style.XtickLineDashB],
                tickStrokeOpacity: style.XtickStrokeOpacity,
                // 刻度值
                label: style.Xlabel,
                labelAlign: style.XlabelAlign,
                labelDirection: style.XlabelDirection,
                labelSpacing: style.XlabelSpacing,
                labelFontSize: style.XlabelFontSize,
                labelFontFamily: style.XlabelFontFamily,
                labelFontWeight: style.XlabelFontWeight,
                labelFill: style.XlabelFill,
                labelFillOpacity: style.XlabelFillOpacity,
                // 网格线
                grid: style.Xgrid,
                gridAreaFill: style.XgridAreaFill,
                gridLineWidth: style.XgridLineWidth,
                gridLineDash: [style.XgridLineDashA, style.XgridLineDashB],
                gridStroke: style.XgridStroke,
                gridStrokeOpacity: style.XgridStrokeOpacity
            },
            y: {
                // 标题
                title: style.Ytitle,
                titlePosition: style.YtitlePosition,
                titleFontSize: style.YtitleFontSize,
                titleFontFamily: style.YtitleFontFamily,
                titleFontWeight: style.YtitleFontWeight,
                // 轴线
                line: style.Yline,
                lineLineWidth: style.YlineLineWidth,
                lineLineDash: [style.YlineLineDashA, style.YlineLineDashB],
                lineStroke: style.YlineStroke,
                lineStrokeOpacity: style.YlineStrokeOpacity,
                // 刻度
                tick: style.Ytick,
                tickDirection: style.YtickDirection,
                tickLength: style.YtickLength,
                tickLineWidth: style.YtickLineWidth,
                tickStroke: style.YtickStroke,
                tickLineDash: [style.YtickLineDashA, style.YtickLineDashB],
                tickStrokeOpacity: style.YtickStrokeOpacity,
                // 刻度值
                label: style.Ylabel,
                labelAlign: style.YlabelAlign,
                labelDirection: style.YlabelDirection,
                labelSpacing: style.YlabelSpacing,
                labelFontSize: style.YlabelFontSize,
                labelFontFamily: style.YlabelFontFamily,
                labelFontWeight: style.YlabelFontWeight,
                labelFill: style.YlabelFill,
                labelFillOpacity: style.YlabelFillOpacity,
                // 网格线
                grid: style.Ygrid,
                gridAreaFill: style.YgridAreaFill,
                gridLineWidth: style.YgridLineWidth,
                gridLineDash: [style.YgridLineDashA, style.YgridLineDashB],
                gridStroke: style.YgridStroke,
                gridStrokeOpacity: style.YgridStrokeOpacity
            }
        },
        // 图例 false 不显示
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,
        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        // 滚动条
        scrollbar: scrollbarStatus ? {
            x: {
                ratio: style.scrollRatio,
                value: style.scrollValue,
                style: {
                    thumbFillOpacity: 1,
                    thumbStrokeOpacity: 1,
                    trackFillOpacity: 1,
                    trackStrokeOpacity: 1,
                    isRound: style.scrollIsRound,
                    padding: style.scrollPadding,
                    thumbFill: style.scrollThumbFill,
                    thumbStroke: style.scrollThumbStroke,
                    trackSize: style.scrollTrackSize,
                    trackFill: style.scrollTrackFill,
                    trackStroke: style.scrollTrackStroke,
                }
            }
        } : false,
    }
    return <Line className='ChartsClass' {...config} />
}
// !!!面积图
export const AreaTemplate = ({ size, data, style }) => {
    const [Size, setSize] = useState(size)
    const SizeValue = useDebounce(Size, { wait: 500 })
    const { width, height } = SizeValue
    useEffect(() => setSize(size), [size])
    const { shapeField, lineStatus, chartColor, legendStatus, tooltipStatus, scrollbarStatus, labelStatus } = style
    const config = {
        xField: 'type',
        yField: 'value',
        colorField: 'name',
        shapeField: shapeField === 'line' ? 'area' : shapeField,
        width,
        height,
        data,
        // 色板
        scale: { color: { range: chartColor } },
        line: lineStatus ? {} : false,
        // 坐标轴
        axis: {
            x: {
                // 标题
                title: style.Xtitle,
                titlePosition: style.XtitlePosition,
                titleFontSize: style.XtitleFontSize,
                titleFontFamily: style.XtitleFontFamily,
                titleFontWeight: style.XtitleFontWeight,
                // 轴线
                line: style.Xline,
                lineLineWidth: style.XlineLineWidth,
                lineLineDash: [style.XlineLineDashA, style.XlineLineDashB],
                lineStroke: style.XlineStroke,
                lineStrokeOpacity: style.XlineStrokeOpacity,
                // 刻度
                tick: style.Xtick,
                tickDirection: style.XtickDirection,
                tickLength: style.XtickLength,
                tickLineWidth: style.XtickLineWidth,
                tickStroke: style.XtickStroke,
                tickLineDash: [style.XtickLineDashA, style.XtickLineDashB],
                tickStrokeOpacity: style.XtickStrokeOpacity,
                // 刻度值
                label: style.Xlabel,
                labelAlign: style.XlabelAlign,
                labelDirection: style.XlabelDirection,
                labelSpacing: style.XlabelSpacing,
                labelFontSize: style.XlabelFontSize,
                labelFontFamily: style.XlabelFontFamily,
                labelFontWeight: style.XlabelFontWeight,
                labelFill: style.XlabelFill,
                labelFillOpacity: style.XlabelFillOpacity,
                // 网格线
                grid: style.Xgrid,
                gridAreaFill: style.XgridAreaFill,
                gridLineWidth: style.XgridLineWidth,
                gridLineDash: [style.XgridLineDashA, style.XgridLineDashB],
                gridStroke: style.XgridStroke,
                gridStrokeOpacity: style.XgridStrokeOpacity
            },
            y: {
                // 标题
                title: style.Ytitle,
                titlePosition: style.YtitlePosition,
                titleFontSize: style.YtitleFontSize,
                titleFontFamily: style.YtitleFontFamily,
                titleFontWeight: style.YtitleFontWeight,
                // 轴线
                line: style.Yline,
                lineLineWidth: style.YlineLineWidth,
                lineLineDash: [style.YlineLineDashA, style.YlineLineDashB],
                lineStroke: style.YlineStroke,
                lineStrokeOpacity: style.YlineStrokeOpacity,
                // 刻度
                tick: style.Ytick,
                tickDirection: style.YtickDirection,
                tickLength: style.YtickLength,
                tickLineWidth: style.YtickLineWidth,
                tickStroke: style.YtickStroke,
                tickLineDash: [style.YtickLineDashA, style.YtickLineDashB],
                tickStrokeOpacity: style.YtickStrokeOpacity,
                // 刻度值
                label: style.Ylabel,
                labelAlign: style.YlabelAlign,
                labelDirection: style.YlabelDirection,
                labelSpacing: style.YlabelSpacing,
                labelFontSize: style.YlabelFontSize,
                labelFontFamily: style.YlabelFontFamily,
                labelFontWeight: style.YlabelFontWeight,
                labelFill: style.YlabelFill,
                labelFillOpacity: style.YlabelFillOpacity,
                // 网格线
                grid: style.Ygrid,
                gridAreaFill: style.YgridAreaFill,
                gridLineWidth: style.YgridLineWidth,
                gridLineDash: [style.YgridLineDashA, style.YgridLineDashB],
                gridStroke: style.YgridStroke,
                gridStrokeOpacity: style.YgridStrokeOpacity
            }
        },
        // 图例 false 不显示
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,
        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        // 滚动条
        scrollbar: scrollbarStatus ? {
            x: {
                ratio: style.scrollRatio,
                value: style.scrollValue,
                style: {
                    thumbFillOpacity: 1,
                    thumbStrokeOpacity: 1,
                    trackFillOpacity: 1,
                    trackStrokeOpacity: 1,
                    isRound: style.scrollIsRound,
                    padding: style.scrollPadding,
                    thumbFill: style.scrollThumbFill,
                    thumbStroke: style.scrollThumbStroke,
                    trackSize: style.scrollTrackSize,
                    trackFill: style.scrollTrackFill,
                    trackStroke: style.scrollTrackStroke,
                }
            }
        } : false,
    }
    return <Area className='ChartsClass' {...config} />
}
// !!!饼图
export const PieTemplate = ({ data, style }) => {
    const { chartColor, innerRadius, legendStatus, tooltipStatus, labelStatus, annotationsStatus } = style
    const config = {
        data,
        angleField: 'value',
        colorField: 'type',
        innerRadius,
        scale: { color: { range: chartColor } },
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,

        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        annotations: annotationsStatus && [
            {
                type: 'text',
                style: {
                    x: '50%',
                    y: '50%',
                    textAlign: 'center',
                    text: style.annotationsText.replace(/\\n/g, '\n'),
                    fontSize: style.annotationsFontSize,
                    fontFamily: style.annotationsFfontFamily,
                    fontWeight: style.annotationsFfontWeight,
                    fill: style.annotationsFfill,
                },
            },
        ],
        style: {
            stroke: style.styleStroke,
            radius: style.styleRadius,
            inset: style.styleInset,
        }
    }
    return <Pie className='ChartsClass'  {...config} />
}
// !!!仪表盘
export const GaugeTemplate = ({ data, style }) => {
    // 仪表盘图例类型
    const GaugeTextTempA01 = (Ttarget, Ttotal, Vtarget, Vtotal) => {
        return `${Ttarget} : ${Vtarget} \n ${Ttotal}:${((Vtarget / Vtotal) * 100).toFixed(2)}%`
    }

    const GaugeTextTempA02 = (Ttarget, Ttotal, Vtarget, Vtotal) => {
        return `223`
    }
    const { chartColor, thresholds, totalField, target, total, type } = style
    const config = {
        data: { target: data, total: totalField, thresholds },
        legend: false,
        tooptip: false,
        scale: { color: { range: chartColor }, },
        style: {
            textContent: (e, s) => {
                const TextMapping = {
                    A01: GaugeTextTempA01,
                    A02: GaugeTextTempA02
                }
                return TextMapping[type](target, total, e, s)
            }
        },
    };
    return <Gauge className='ChartsClass' {...config} />;
}
// !!!雷达图
export const RadarTemplate = ({ data, style }) => {
    const { shapeField, chartColor, legendStatus, tooltipStatus, labelStatus, area } = style

    const config = {
        xField: 'type',
        yField: 'value',
        colorField: 'name',
        shapeField,
        data,
        // 色板
        scale: { color: { range: chartColor } },
        // 坐标轴
        axis: {
            x: {
                // 标题
                title: style.Xtitle,
                titlePosition: style.XtitlePosition,
                titleFontSize: style.XtitleFontSize,
                titleFontFamily: style.XtitleFontFamily,
                titleFontWeight: style.XtitleFontWeight,
                // 轴线
                line: style.Xline,
                lineLineWidth: style.XlineLineWidth,
                lineLineDash: [style.XlineLineDashA, style.XlineLineDashB],
                lineStroke: style.XlineStroke,
                lineStrokeOpacity: style.XlineStrokeOpacity,
                // 刻度
                tick: style.Xtick,
                tickDirection: style.XtickDirection,
                tickLength: style.XtickLength,
                tickLineWidth: style.XtickLineWidth,
                tickStroke: style.XtickStroke,
                tickLineDash: [style.XtickLineDashA, style.XtickLineDashB],
                tickStrokeOpacity: style.XtickStrokeOpacity,
                // 刻度值
                label: style.Xlabel,
                labelAlign: style.XlabelAlign,
                labelDirection: style.XlabelDirection,
                labelSpacing: style.XlabelSpacing,
                labelFontSize: style.XlabelFontSize,
                labelFontFamily: style.XlabelFontFamily,
                labelFontWeight: style.XlabelFontWeight,
                labelFill: style.XlabelFill,
                labelFillOpacity: style.XlabelFillOpacity,
                // 网格线
                grid: style.Xgrid,
                gridAreaFill: style.XgridAreaFill,
                gridLineWidth: style.XgridLineWidth,
                gridLineDash: [style.XgridLineDashA, style.XgridLineDashB],
                gridStroke: style.XgridStroke,
                gridStrokeOpacity: style.XgridStrokeOpacity
            },
            y: {
                // 标题
                title: style.Ytitle,
                titlePosition: style.YtitlePosition,
                titleFontSize: style.YtitleFontSize,
                titleFontFamily: style.YtitleFontFamily,
                titleFontWeight: style.YtitleFontWeight,
                // 轴线
                line: style.Yline,
                lineLineWidth: style.YlineLineWidth,
                lineLineDash: [style.YlineLineDashA, style.YlineLineDashB],
                lineStroke: style.YlineStroke,
                lineStrokeOpacity: style.YlineStrokeOpacity,
                // 刻度
                tick: style.Ytick,
                tickDirection: style.YtickDirection,
                tickLength: style.YtickLength,
                tickLineWidth: style.YtickLineWidth,
                tickStroke: style.YtickStroke,
                tickLineDash: [style.YtickLineDashA, style.YtickLineDashB],
                tickStrokeOpacity: style.YtickStrokeOpacity,
                // 刻度值
                label: style.Ylabel,
                labelAlign: style.YlabelAlign,
                labelDirection: style.YlabelDirection,
                labelSpacing: style.YlabelSpacing,
                labelFontSize: style.YlabelFontSize,
                labelFontFamily: style.YlabelFontFamily,
                labelFontWeight: style.YlabelFontWeight,
                labelFill: style.YlabelFill,
                labelFillOpacity: style.YlabelFillOpacity,
                // 网格线
                grid: style.Ygrid,
                gridAreaFill: style.YgridAreaFill,
                gridLineWidth: style.YgridLineWidth,
                gridLineDash: [style.YgridLineDashA, style.YgridLineDashB],
                gridStroke: style.YgridStroke,
                gridStrokeOpacity: style.YgridStrokeOpacity
            }
        },
        // 图例 false 不显示
        legend: legendStatus ? {
            color: {
                // 布局设置
                layout: {
                    flexDirection: style.flexDirection,
                    alignItems: style.alignItems,
                    justifyContent: style.justifyContent,
                },
                // 图例
                itemLabelFontSize: style.itemLabelFontSize,
                itemLabelFontFamily: style.itemLabelFontFamily,
                itemLabelFontWeight: style.itemLabelFontWeight,
                itemLabelFill: style.itemLabelFill,
                itemLabelFillOpacity: style.itemLabelFillOpacity,
                itemSpacing: style.itemSpacing,
            },
        } : false,
        // 提示信息
        interaction: {
            tooltip: tooltipStatus ? {
                render: (_, list) => {
                    const Tooltips = TooltipMapping[style.tooltipSelect]
                    return <Tooltips list={list} data={data} />
                }
            } : false
        },
        // 数据
        label: labelStatus && {
            text: 'value',
            transform: [{ type: style.labelType }],
            position: style.labelPosition,
            fontSize: style.labelFontSize,
            fontFamily: style.labelFontFamily,
            fontWeight: style.labelFontWeight,
        },
        style: { lineWidth: 2 },
        area: area && { style: { fillOpacity: style.areaOpacity } },
    };
    return <Radar className='ChartsClass' {...config} />;
}
// !!! 日历图
export const HeatmapTemplate = ({ data, style }) => {
    const chartsBox = useRef()
    const { chartColor, firstDay, min, max, range } = style
    useEffect(() => {
        if (chartsBox) {
            const myCharts = echarts.init(chartsBox.current)
            myCharts.setOption({
                tooltip: {
                    className: 'EChartsTooltipClass',
                    formatter: (e) => {
                        const { color, value } = e
                        const [date, number] = value
                        return `
                            <div class="HeatmapTooltip">
                                <div>${date}</div>
                                <div>
                                    <span style="background:${color}" ></span>
                                    <div>${number}</div>
                                </div>
                            </div>
                        `
                    }
                },
                visualMap: {
                    min,
                    max,
                    right: 0,
                    top: 'center',
                    calculable: true,
                    inRange: { color: chartColor, symbolSize: [30, 150] },
                },
                calendar: {
                    top: 24,
                    left: 56,
                    right: 80,
                    cellSize: ['auto', 'auto'],
                    monthLabel: { nameMap: 'ZH' },
                    dayLabel: { firstDay, nameMap: 'ZH' },
                    range
                },
                series: { data, type: 'heatmap', coordinateSystem: 'calendar' }
            })
        }
    }, [])
    return <div className='ChartsClass Echarts' style={{ height: '100%' }} ref={chartsBox} />
}
// !!! 3D柱图
export const Bar3DTemplate = ({ data, style }) => {
    const chartsBox = useRef()
    const { chartColor, min, max, Xtitle, Ytitle, Ztitle, Xlength, Ylength, Zlength, opacity, XData, YData } = style
    useEffect(() => {
        if (chartsBox) {
            const myCharts = echarts.init(chartsBox.current)
            const options = {
                tooltip: {
                    className: 'EChartsTooltipClass',
                    formatter: (e) => {
                        const { color, value } = e
                        const [x, y, z] = value
                        return `
                            <div class='Bar3DTooltip'>
                                <div>${YData[y]} - ${XData[x]}</div>
                                <div>
                                    <span style="background:${color}"></span>
                                    <div>${z}</div>
                                </div>
                            </div>
                        `
                    }
                },
                visualMap: {
                    min, max,
                    right: 0,
                    top: 'center',
                    calculable: true,
                    inRange: { color: chartColor, symbolSize: [30, 150] }
                },
                xAxis3D: { type: 'category', data: XData, name: Xtitle },
                yAxis3D: { type: 'category', data: YData, name: Ytitle },
                zAxis3D: { type: 'value', name: Ztitle },
                grid3D: { boxWidth: Xlength, boxDepth: Ylength, boxHeight: Zlength },
                series: [{ type: 'bar3D', data, itemStyle: { opacity } }]
            }
            myCharts.setOption(options)
        }
    }, [])
    return <div className='ChartsClass Echarts' style={{ height: '100%' }} ref={chartsBox} />
}

